<template>
  <div style="height:100%;background-color: #fff; ">
    <div>
      <h5Pop ref="h5PopFrame" poptypes="shitang" :h5pop="isShowH5Pop" @cancel="isShowH5Pop = false" />
    </div>
    <div class="background">
      <img class="logo" mode="scaleToFill" src="@/assets/home/logo1.png">
      <img class="title" mode="scaleToFill" src="@/assets/home/title1.png">
      <div class="text1">掌银充值无限制 实时到账省心力</div>
      <div class="text2">扫码取餐不带卡 人脸识别科技强</div>
      <div class="text2">饭卡丢失不慌张 挂失冻结帮你忙</div>
      <div class="text2">线上订餐无等待 电子菜谱真丰富</div>
    </div>
    <div class="bottom">
      <div class="bottom-inside">
        <div class="bottom-slogan">
          让食堂更高效更便捷
        </div>
        <button class="enterprise" hover-class="none" @click="goToEnterprise">选择食堂</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDeviceType,
  getABCDeviceType
} from '@/utils/util' // 导入工具类
import h5Pop from '@/components/h5Pop/h5Pop'
import {
  Toast
} from 'vant'
import {
  getCompanyList,
  getH5CompanyList,
  getH5CompanyListPay
} from '@/api/h5'

export default {
  components: {
    h5Pop
  },
  data() {
    return {
      storageMode: '',
      isShowH5Pop: false, // 是否展示H5 pop弹框
      deviceType: ''
    }
  },
  created(query) {
    // 从启动参数中取得mode数据
    // 从掌银首页进
    let ABCdeviceType
    if (window.AlipayJSBridge) {
      window.AlipayJSBridge.call('setTitle', {
        title: '食堂'
      })
    } else {
      document.addEventListener('AlipayJSBridgeReady', () => {
        console.log('回调标题')
        window.AlipayJSBridge.call('setTitle', {
          title: '食堂'
        })
      }, false)
    }
  },
  mounted(query) {
    // 展示页面时判断返回路径
    window.addEventListener('pageshow', this.handlePageShow)
    // 添加导航栏
    this.isShowH5Pop = false
    if (window && window.AlipayJSBridge) {
      const _this = this
      AlipayJSBridge.call('setOptionMenu', {
        icon: 'iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAUKADAAQAAAABAAAAUAAAAAAx4ExPAAABn0lEQVR4Ae3XwW3CQBCFYdapwsecudkdRCmDW5IrFSW3lBHRgX2jhMhlODMWlvZiNE9ZS6z0r4Qwy2N2/YFhOBwYCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIlBRIWbHUdd17SunN5o63+es8z1/jOH7a4znL7nlY1T4WwL7vWxP5ttvLhszF5k/DMEwbzxeZrnEfjZ25I97DcxyH9Uz+ifX5kqPKfTzZZfthl+05IPHctu3vNE1jICtHat1Hc/vOC52wkg0VzEJKbSWbLRE6VGp71i/h9QcjsoCSjdTLM0ptJZuvETlWah8dkPEPAQe8Cq9XskLZJarUVrK77qPxPi+6gpKN1lxzSm0lu9aP3iu1PeutQ7L+68fuvVW5Ny7WB75aYK+Gusp9+CXsICe7ebO8NZZG2p7cC8/XrXIfeWNc1V+orXe64PyjeBQ8JUohgAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCDy+wB97bJ5UeONBvgAAAABJRU5ErkJggg=='
      })
      AlipayJSBridge.call('showOptionMenu')
      document.addEventListener(
        'optionMenu',
        function(e) {
          _this.isShowH5Pop = true
        },
        false
      )
    }
  },
  beforeDestroy() {
    window.removeEventListener('pageshow', this.handlePageShow)
  },
  methods: {
    goToEnterprise(event) {
      if (window.sensors) {
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_首页',
          firefly_click_area: '总行_食堂_首页_跳转到食堂列表',
          firefly_click_section: '总行_食堂_首页_跳转到食堂列表',
          firefly_click_name: '跳转到食堂列表',
          firefly_click_code: '跳转到食堂列表'
        })
      }
      this.$router.push('/enterpriseList')
    },
    openPopup() {
      this.isShowH5Pop = true
    },
    async handlePageShow(event) {
      if (event.persisted && this.$route.path === '/') {
        // 用户从缓存中返回到首页
        console.log('用户已从缓存中返回到 H5 首页')
        localStorage.removeItem('userCurrentCanteen')
      } else {
        this.deviceType = getDeviceType()
        // localStorage.setItem("deviceType", this.deviceType)
        const userCurrentCanteen = JSON.parse(localStorage.getItem('userCurrentCanteen'))
        let newData
        if (userCurrentCanteen) {
          // 埋点插件进行页面曝光埋点
          if (window.sensors) {
            window.sensors.trackCustom({
              custom_type: 'firefly_exposure',
              firefly_ctm_page: '总行_食堂_首页',
              firefly_ctm_area: '总行_食堂_首页_自动跳转',
              firefly_ctm_prodName: userCurrentCanteen.name
            })
            window.sensors.trackCustom({
              custom_type: 'firefly_exposure',
              firefly_ctm_page: '总行_食堂_首页',
              firefly_ctm_area: '总行_食堂_首页_自动跳转',
              firefly_ctm_prodName: '自动跳转总数统计'
            })
            window.sensors.trackCustom({
              custom_type: 'firefly_exposure',
              firefly_ctm_page: '总行_食堂_食堂跳转',
              firefly_ctm_area: '总行_食堂_食堂跳转_跳转统计',
              firefly_ctm_prodName: '自动跳转和点击跳转总数统计'
            })
          }
          // 获取最新数据
          const searchParams = {
            name: userCurrentCanteen.name,
            cityCode: userCurrentCanteen.cityCode,
            companyType: userCurrentCanteen.companyType
          }
          if (this.deviceType == 'HarmonyOS') {
            await getH5CompanyList(searchParams)
              .then(async res => {
                if (res) {
                  res.map(item => {
                    if (item.companyId == userCurrentCanteen.companyId) {
                      localStorage.setItem('userCurrentCanteen', JSON.stringify(item))
                      newData = item
                    }
                  })
                } else {
                  await getH5CompanyListPay(searchParams)
                    .then(res => {
                      res.map(item => {
                        if (item.companyId == userCurrentCanteen.companyId) {
                          localStorage.setItem('userCurrentCanteen', JSON.stringify(item))
                          newData = item
                        }
                      })
                    })
                    .catch(err => {

                    })
                }
              })
              .catch(async err => {
                // 调用pay路径接口
                await getH5CompanyListPay(searchParams)
                  .then(res => {
                    res.map(item => {
                      if (item.companyId == userCurrentCanteen.companyId) {
                        localStorage.setItem('userCurrentCanteen', JSON.stringify(item))
                        newData = item
                      }
                    })
                  })
                  .catch(err => {

                  })
              })
          } else {
            await getCompanyList(searchParams)
              .then(res => {
                res.map(item => {
                  if (item.companyId == userCurrentCanteen.companyId) {
                    localStorage.setItem('userCurrentCanteen', JSON.stringify(item))
                    newData = item
                  }
                })
              })
              .catch(err => {

              })
          }

          let chooseId
          if (this.deviceType == 'HarmonyOS') {
            chooseId = newData.harmonyOsAppId
          } else {
            chooseId = newData.appId
          }
          if (chooseId.indexOf('http') == 0) {
            var params = {
              info: {
                url: chooseId // 要访问的目标商城地址
              }
            }
            window.AlipayJSBridge && AlipayJSBridge.call('abcOpenNewH5App', params, function(data) {
              console.log('调用结果' + JSON.stringify(data))
            })
            //  window.AlipayJSBridge && AlipayJSBridge.call('pushWindow', {
            //   'url':chooseId,
            //   'passData':{},
            //   'param':{}
            //  },function(response){
            //   console.log(response,'pushWindow返回')
            //  });
          } else {
            if (chooseId.indexOf('?') > 0) {
              // 有传参
              const cutIndex00 = chooseId.indexOf('?')
              const appId = chooseId.slice(0, cutIndex00)
              const datas = chooseId.slice(cutIndex00 + 1)
              const paramslineList = datas.split('&')
              const params = {}
              for (let i = 0; i < paramslineList.length; i++) {
                const cutIndex1 = paramslineList[i].indexOf('=')
                params[paramslineList[i].slice(0, cutIndex1)] = paramslineList[i].slice(cutIndex1 + 1)
              }
              console.log('进入小程序e', newData)
              console.log('进入小程序携带参数', params)
              // 小程序链接
              AlipayJSBridge.call('startApp', {
                appId: appId,
                param: {
                  showProgress: 'NO',
                  backBehavior: 'back',
                  params: JSON.stringify(params)
                }
              }, function(result) {
                console.log(result, 'result')
              })
            } else {
              // console.log("进入小程序e", e.appId)
              // 小程序链接
              AlipayJSBridge.call('startApp', {
                appId: chooseId,
                param: {
                  showProgress: 'NO',
                  backBehavior: 'back'
                }
              }, function(result) {
                console.log(result, 'result')
              })
            }
          }
        }
      }
    }
  },
  onHide() {
    if (window && window.AlipayJSBridge) {
      window.AlipayJSBridge.call('hideOptionMenu')
    } else {
      console.log('hideOptionMenu方法没有获取成功')
    }
  }
}
</script>

<style scoped lang="less">
  .background {
    background: url("../../assets/home/bg1242.png");
    width: 100%;
    height: 75%;
    /* margin: 0 auto; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* 重点二 */
    overflow: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: column;
    /* padding-bottom: 3vh; */
  }

  .logo {
    display: block;
    height: 212px;
    width: 206px;
    margin-bottom: 32px;
    margin-top: 60px
  }

  .title {
    display: block;
    height: 71px;
    width: 319px;
    margin-bottom: 32px;
  }

  .text1 {
    margin-top: 5px;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 30px;
  }

  .text2 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 30px;
  }

  .bottom-inside {
    height: 15vh;
    display: flex;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .bottom {
    width: 100%;
    height: 25%;
    background-color: #fff;
    padding-top: 6vh;
    /* position: absolute; */
    position: relative;
    bottom: 3vh;
  }

  .bottom-slogan {
    font-size: 36px;
    margin-bottom: 50px;
    font-weight: 400;
  }

  .bottom button {
    width: 560px;
    padding: 20px 0;
    font-size: 36px;
    font-weight: 400;
    /* height: 100px; */
    border-radius: 62px;
  }

  .service {
    border: 1px solid #ffa600;
    color: #ffa600;
  }

  .enterprise {
    border: 1px solid #ffa600;
    background-color: #ffa600;
    color: #fff;
  }

  @media only screen and (min-width:700px) {

    /* 对于折叠屏，通常需要特定的样式来适配 */
    .background {
      background: url("../../assets/home/bg1242.png");
      width: 100%;
      height: 75%;
      /* margin: 0 auto; */
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      /* 重点二 */
      overflow: auto;
      display: flex;
      justify-content: start;
      align-items: center;
      flex-flow: column;
      /* padding-bottom: 3vh; */
    }

    .logo {
      display: block;
      height: 150px;
      width: 150px;
      margin-bottom: 15px;
      margin-top: 30px
    }

    .title {
      display: block;
      height: 35px;
      width: 150px;
      margin-bottom: 32px;
    }

    .text1 {
      margin-top: 5px;
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 30px;
    }

    .text2 {
      font-size: 30px;
      font-weight: 500;
      margin-bottom: 30px;
    }

    .bottom-inside {
      height: 15vh;
      display: flex;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      flex-flow: column;
    }

    .bottom {
      width: 100%;
      height: 25%;
      background-color: #fff;
      padding-top: 6vh;
      /* position: absolute; */
      position: relative;
      bottom: 3vh;
    }

    .bottom-slogan {
      font-size: 36px;
      margin-bottom: 50px;
      font-weight: 400;
    }

    .bottom button {
      width: 500px;
      padding: 20px 0;
      font-size: 36px;
      font-weight: 400;
      /* height: 100px; */
      border-radius: 62px;
    }

    .enterprise {
      border: 1px solid #ffa600;
      background-color: #ffa600;
      color: #fff;
    }
  }
</style>
